<template>
  <Modal v-model="shareEarnPop" width="36" :mask-closable="false" class-name="vertical-center-modal">
    <div slot="header" class="head-title">{{ $t("event.shareEarn") }}</div>
    <div class="detail-content">
      <div class="sub-title">
        {{ $t("event.text_before") }}
        <span>11.11 {{ $t("event.text_span") }}</span> !
      </div>
      <div class="content-sty">
        <Row :gutter="8">
          <Col span="12">
          <div class="left-rect">
            <img src="@/assets/images/activity/icon9.png" class="img-sty" alt="" />
            <div class="text">{{ $t("event.willFriends") }}</div>
          </div>
          </Col>
          <Col span="12">
          <div class="right-rect">
            <img src="@/assets/images/activity/icon8.png" class="img-sty" alt="" />
            <div class="text">{{ $t("event.with100buyShare") }}</div>
          </div>
          </Col>
        </Row>
        <Row>
          <Col span="24">
          <div class="rect-text">
            🎉 {{ $t("event.hereFestivalShopping") }} 👉
            {{ posterObj.shortLinkUrl || "" }}
          </div>
          </Col>
        </Row>
      </div>
    </div>
    <div slot="footer" class="footer-sty">
      <div class="btn" @click="copyBtn">
        <Icon type="md-copy" color="#FFFFFF" size="24" />
        {{ $t("event.contentCopy") }}
      </div>
      <div class="btn" @click="downloadBtn">
        <img src="@/assets/images/activity/icon12.png" class="img-sty" alt="" />
        {{ $t("event.posterDownload") }}
      </div>
      <div class="btn dark-sty" @click="shareBtn">
        <img src="@/assets/images/activity/icon11.png" class="img-sty" alt="" />
        {{ $t("event.onShare") }}
      </div>
      <div class="btn default-sty" @click="redditBtn">
        <img src="@/assets/images/activity/icon10.png" class="img-sty" alt="" />
        {{ $t("event.onReddit") }}
      </div>
    </div>
    <poster ref="posterRef"></poster>
  </Modal>
</template>
<script>
import { createByEvent } from "@/api/activity";
import VueQr from "vue-qr";
import poster from "./poster.vue";
export default {
  components: { poster },
  data() {
    return {
      shareEarnPop: false,
      posterObj: {
        eventCode: "",
        inviteCode: "",
        shortLinkUrl: "",
      },
    };
  },
  methods: {
    open() {
      createByEvent({ eventCode: "20241111" })
        .then((res) => {
          this.posterObj = res.result;
          this.shareEarnPop = true;
        })
        .catch(() => { });
    },
    copyBtn() {
      this.$copyText(this.shareText()).then(
        () => {
          this.$Message.success(this.$t("public.copySuccess"));
        },
        () => {
          this.$Message.error(this.$t("public.copyFail"));
        }
      );
    },
    shareText() {
      return `🎉 ${this.$t("event.hereFestivalShopping")} 👉 ${this.posterObj.shortLinkUrl
        } #100buy #1111extravaganza`;
    },
    downloadBtn() {
      this.$refs.posterRef.open();
      this.$refs.posterRef.save(this.posterObj);
    },
    shareBtn() {
      let text = encodeURIComponent(this.shareText());
      window.open(`https://twitter.com/intent/tweet?text=${text}`);
    },
    redditBtn() {
      window.open(
        `https://www.reddit.com/submit?title=100buy+11.11+Extravaganza%3A+Spend+%C2%A5300%2C+Save+%C2%A550%21`
      );
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 18px;
  position: relative;

  &::before {
    /* 1 */
    display: block;
    content: "";
    border-radius: 18px;
    border: 8px solid transparent;
    background: linear-gradient(271deg,
        rgba(254, 49, 97, 1),
        rgba(53, 231, 207, 1)) border-box;
    /* 2 */
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    /* 3 */
    -webkit-mask-composite: xor;
    /* 4 */
    mask-composite: exclude;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

:deep(.ivu-modal-header) {
  border: none;
  padding: 28px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 28px 32px;
}

:deep(.ivu-modal-close) {
  position: absolute;
  top: 20px;
  right: 26px;
}

:deep(.ivu-modal-close .ivu-icon-ios-close) {
  color: #333333;
  font-size: 64px;
  font-weight: 800;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32px;
    color: #1e1714;
    line-height: 38px;
  }

  .detail-content {
    .sub-title {
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 20px;
      color: #1e1714;
      line-height: 23px;

      span {
        font-family: Open Sans-SemiBold;
        font-size: ExtraBold;
        font-weight: 600;
        color: #ff186b;
      }
    }

    .content-sty {
      margin: 0 100px;
      margin-top: 24px;

      .left-rect {
        min-height: 270px;
        background: #f3f9ff;
        border-radius: 15px 15px 15px 15px;
        padding: 20px 24px;

        .img-sty {
          width: 64px;
          height: 64px;
        }

        .text {
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 15px;
          color: #2973ba;
          line-height: 18px;
          margin-top: 16px;
        }
      }

      .right-rect {
        min-height: 270px;
        background: #fff8e4;
        border-radius: 15px 15px 15px 15px;
        padding: 20px 24px;

        .img-sty {
          width: 64px;
          height: 64px;
        }

        .text {
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 15px;
          color: #c08f00;
          line-height: 18px;
          margin-top: 16px;
        }
      }

      .rect-text {
        background: #f7f9fc;
        border-radius: 15px 15px 15px 15px;
        padding: 20px 24px;
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 16px;
        color: #aeb0b9;
        line-height: 19px;
        margin-top: 20px;
      }
    }
  }

  .footer-sty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .btn {
      z-index: 99;
      min-width: 356px;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 20px;
      color: #ffffff;
      line-height: 23px;
      padding: 12px 28px;
      background: #ff186b;
      border-radius: 44px;
      text-align: center;
      margin-bottom: 28px;
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;

      .img-sty {
        width: 32px;
        height: 32px;
      }
    }

    .dark-sty {
      background: #1c1548;
    }

    .default-sty {
      background: none;
      border: 1px solid #f03131;
      color: #f03131;
      margin-bottom: 0;
    }
  }
}
</style>
